import { Button, Space } from "antd"
import useToggle from "../../packages/useToggle"

// eslint-disable-next-line react-refresh/only-export-components
const AnotherDemo = () => {
  const [state, { toggle, set, setLeft, setRight }] = useToggle('Hello', 'World');

  return (
    <div>
      <p>Effects：{state}</p>
      <p>
        <button type="button" onClick={toggle}>
          Toggle
        </button>
        <button type="button" onClick={() => set('Hello')} style={{ margin: '0 8px' }}>
          Set Hello
        </button>
        <button type="button" onClick={() => set('World')}>
          Set World
        </button>
        <button type="button" onClick={setLeft} style={{ margin: '0 8px' }}>
          Set Left
        </button>
        <button type="button" onClick={setRight}>
          Set Right
        </button>
      </p>
    </div>
  );
};

const useToggleDemo: React.FC = () => {
  const [state, {toggle, set, setLeft, setRight}] = useToggle()

  return(
    <>
      <div>
        <p>state: {`${state}`}</p>
        <Space>
          <Button type="primary" onClick={toggle}>toggle</Button>
          <Button onClick={setLeft}>setLeft</Button>
          <Button onClick={setRight}>setRight</Button>
          <Button onClick={() => set(true)}>set true</Button>
        </Space>
      </div>
      <AnotherDemo />
    </>
  )
}

export default useToggleDemo